<template>
  <div>
    <base-dialog :width="'50'" :title="'测试弹窗'"  ref="dialog" @confirm="confirmAdd" @cancle="cancleAdd">
      <el-form ref="form" :model="form" label-width="180px" :rules="rules">
        <el-form-item label="手机号码验证" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
     
        <el-form-item label="活动形式" prop="desc">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
    </base-dialog>
  </div>
</template>



<script>
import baseDialog from "./baseDialog.vue";
import {validatePhone} from "@/utils/validate";

const validatePhones = (rule, value, callback) => {
  if (validatePhone(value)) {
    callback()
  } else {
  	callback(new Error('请输入正确的手机号码'));
  }
}
export default {
  components: {
    baseDialog
  },
  data() {
    return {
        form: {
          name: '',
          region: '',
          desc: ''
        },
        rules:{
          name:[
           { validator: validatePhones, trigger: 'change' }
          ]
        }
    };
  },
  methods: {
    open() {
      this.$refs.dialog.open();
    },
    close() {
      this.$refs.dialog.close();
    },
    //确认
    confirmAdd() {
      this.$emit("addSucess");
    },
    //取消
    cancleAdd() {
      this.$refs.form.resetFields();
    }
  }
};
</script>


<style lang="">
</style>